
<template>
    <view>
        <view class="goods">
            <!--锚点-->
            <view v-if="maodianxs && isToken" class="box1">
                <view class="yangs" @click="miaod(index)" v-for="(item,index) in maodian" :style="miaodxb === index ? 'color:#2e996f;' : ''">
                    {{item}}
                    <view class="yangs-n" :style="miaodxb === index ? 'background-color: #2e996f;' : ''"></view>
                </view>
            </view>
            <!--轮播图-->
            <view class="banner">
                <u-swiper :list="bannerList" height="422" imgMode="widthFix"></u-swiper>
            </view>
            <!--商品信息-->
            <view class="box2">
                <view class="boxli">
                    <view>
                    <view class="boxl">￥{{product.price_selling||''}}</view>
                    <view class="ret-yuans">￥{{product.price_market||''}}</view>
                    </view>
                    <view class="boxr">
                        <!-- #ifdef MP  -->
                        <button class="share-button" open-type="share">
                            <image :src="$imgUrl+'image/share.png'"></image>
                        </button>
                        <!-- #endif -->
                        <!-- #ifdef APP-PLUS  -->
                        <view class="share" @click="is_show_share_box = true">
                            <image :src="$imgUrl+'image/share.png'"></image>
                        </view>
                        <!-- #endif -->

                        <!-- <uni-popup ref="popup0" type="share" background-color="#fff">
                        <uni-popup-share title="分享到" @select="select"></uni-popup-share>
                    </uni-popup> -->
                        <!-- #ifndef H5 -->
                        <view class="collect" @click="deFollow(product)" v-if="product.is_collect == 0">
                            <image :src="$imgUrl+'image/follow.png'"></image>
                        </view>
                        <view class="collect" @click="deFollow(product)" v-if="product.is_collect == 1">
                            <image :src="$imgUrl+'image/hongsegz.png'"></image>
                        </view>
                        <!-- #endif -->
                    </view>
                </view>
                <view class="name">{{product.name}}</view>
            </view>

            <view class="height30"></view>
            <!--商品信息-->
            <view class="goodsInfo">
                <view class="item">
                    <view class="iteml">
                        <view class="p1">已售</view>
                        <view>{{product.stock_virtual}}件</view>
                    </view>
                    <view></view>
                </view>
                <!-- #ifndef H5 -->
                <view class="item" @tap='openSkuPopup(1)'>
                    <view class="iteml">
                        <view class="p1">已选</view>
                        <view>{{product.name}} --
                            <!-- {{range.find(item=>item.value==AttriValue).text}} -->
                            {{selectModel}}
                        </view>
                    </view>
                    <view class="more-content">
                        <text class="iconfont icon-more more"></text>
                    </view>
                </view>
                <view class="item" @click="selectAddress">
                    <view class="iteml">
                        <view class="p1">送至</view>
                        <view style="width:560rpx;">{{product.address?product.address:'暂未选择地址'}}</view>
                        <!-- range0.find(item=>item.value==addressValue).text -->
                    </view>
                    <view class="more-content">
                        <text class="iconfont icon-more more"></text>
                    </view>
                </view>
                <!-- #endif -->
            </view>

            <view class="height30"></view>
            <!--专业服务-->
            <!-- <view class="serve" @click="share1">
            <view class="boxl">
                <view class="p1">专业服务</view>
                <view class="p2" style="">{{product.promise}}</view>
            </view>
            <view class="more-content">
                <text class="iconfont icon-more more"></text>
            </view>
        </view>
        <view class="height30"></view> -->
            <!--评价-->
            <view class="evaluate-data" ref="evaluate" @click="goReviews">
                <view class="boxl">
                    <view class="p1">评价</view>
                    <!-- <view>{{product.evaluNumber}}</view> -->
                </view>
                <view class="boxr">
                    <!-- <view class="p1">好评{{product.evaluRate}}%</view> -->
                    <view class="more-content">
                        <text class="iconfont icon-more more"></text>
                    </view>
                </view>
            </view>
            <view style="height: 1rpx;"></view>
            <view class="evaluateB" v-if="isShow0">
                <view>此商品暂无评价</view>
            </view>
            <view class="evaluateB" @click="goReviews" v-else>
                <view class="boxt">
                    <view class="boxl">
                        <image :src="evaluate.avatar"></image>
                        <view>{{evaluate.nicename}}</view>
                    </view>
                    <view style="color: #999;">{{evaluate.time}}</view>
                </view>
                <view class="comment">{{evaluate.content}}</view>
                <view class="gg" style="">{{evaluate.specs}}</view>
            </view>
            <view class="height30"></view>
            <!--商品列表-->
            <!-- <view v-if="isToken" class="recommend" ref="recommend" style="background: #ffffff; padding: 30rpx; font-size:32rpx;">猜你喜欢
            </view>
            <view v-if="isToken" style="background: #ffffff; padding: 0 20rpx;width:100%;">
                <view style=" display:flex; flex-wrap: nowrap; align-items: center;overflow-x: auto;overflow-y: hidden;display: -webkit-box;">
                    <view class="commodity-content" v-for="(item, index) in dataList1" :key="index" @click="detailClick(item)">
                        <view class="commodity-img">
                            <image :src="item.cover" mode="widthFix" class="commodity-img"></image>
                        </view>
                        <view style="text-align: center;">
                            <text class="commodity-name">{{item.name}}</text>
                        </view>
                        <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                        <text class="commodity-price">￥{{item.price_selling}}</text>
                    </view>
                </view> -->
                <!-- <swiper class="swiper0" circular :indicator-dots="true" :autoplay="false" :interval="5000" indicator-active-color="#2e996f"
                    indicator-color="#f2f2f2" :duration="1000">
                    <swiper-item>
                        <view style=" display:flex; flex-wrap: wrap; align-items: center;">
                            <view class="commodity-content" v-for="(item, index) in dataList1" :key="index" @click="detailClick(item)">
                                <view class="commodity-img">
                                    <image :src="item.cover" mode="widthFix" class="commodity-img"></image>
                                </view>
                                <view style="text-align: center;">
                                    <text class="commodity-name">{{item.name}}</text>
                                </view>
                                <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                <text class="commodity-price">￥{{item.price_selling}}</text>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view style=" display:flex; flex-wrap: wrap; align-items: center;">
                            <view class="commodity-content" v-for="item in dataList2" @click="detailClick(item)">
                                <view class="commodity-img">
                                    <image :src="item.cover" mode="" class="commodity-img"></image>
                                </view>
                                <view style="text-align: center;">
                                    <text class="commodity-name">{{item.name}}</text>
                                </view>
                                <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                <text class="commodity-price">￥{{item.price_selling}}</text>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view style="padding: 15rpx; display:flex; flex-wrap: wrap; align-items: center;justify-content: center;">
                            <view class="commodity-content" v-for="item in dataList3" @click="detailClick(item)">
                                <view class="commodity-img">
                                    <image :src="item.cover" mode="" class="commodity-img"></image>
                                </view>
                                <view style="text-align: center;">
                                    <text class="commodity-name">{{item.name}}</text>
                                </view>
                                <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                <text class="commodity-price">￥{{item.price_selling}}</text>
                            </view>
                        </view>
                    </swiper-item>
                </swiper> -->
            </view>
            <view class="height30"></view>
            <!--商品详情图-->
            <view class="productDetail" ref="productDetail" style="background: #ffffff; padding: 30rpx 30rpx 0 30rpx; font-size:32rpx;">详情</view>
            <view style="background: #ffffff; padding: 40rpx; word-wrap: break-word; word-break:break-all;">
               <!-- <view style="text-align: center;">
                    <text class="commodity-name">{{product.remark ? product.remark : '' }}</text>
                </view> -->
                <mphtml :content="product.content"></mphtml>
              <!-- <rich-text :nodes="product.content"></rich-text> -->
                <!-- <view v-for="(item, index) in list">
                <view class="swiper-item">
                    <img :src="item.pic" alt="" class="swiper-img">
                </view>
            </view> -->
            </view>
            <view class="height30"></view>
            <!--大家都在看商品列表-->
            <view v-if="isToken" class="DouZaiKan">
                <view style="background: #ffffff; padding: 30rpx; font-size:32rpx;">大家都在看</view>
                <view style="background: #ffffff;">
                    <CommodityList :dataList='dataList'></CommodityList>
                    <!-- <recommend /> -->
                </view>
                <view class="u-load-more-wrap">
                    <u-line color="#d4d4d4" length="50"></u-line>
                    <view class="u-load-more-inner"><view class="u-line-1">没有更多了</view></view>
                    <u-line color="#d4d4d4" length="50"></u-line>
                </view>
            </view>
            <view style="height:150rpx;"></view>
            <!--底部-->

            <view class='details-foot'>
                <view class="foot-item">
                    <!-- v-if="data.resp_staff_huanxin_username" @tap='toChatPage()'-->
                    <view v-if="huanxin" class="foot-item0" style="border-right: 1rpx solid #efefef;" @tap='goHome' >
                        <image class='iconfont' :src="$imgUrl+'image/home1.png'"></image>
                        <text>首页</text>
                    </view>
                    <view class="foot-item0" @tap='goShopCart'>
                        <uni-badge class="uni-badge-left-margin" :text="badge" absolute="rightTop" size="small">
                            <image class='iconfont' :src="$imgUrl+'image/shopping.png'"></image>
                            <text>购物车</text>
                        </uni-badge>
                    </view>
                </view>
                <view class="foot-item1">
                    <view class='add-shopcart' @tap='openSkuPopup(2)'>加入购物车</view>
                    <view class='purchase' @tap='openSkuPopup(3)'>立即购买</view>
                </view>
            </view>

            <!--服务弹出层-->
            <uni-popup ref="popup1" type="bottom" background-color="#fff">
                <view style=" background-color:#fff; border-top-right-radius:25rpx; border-top-left-radius:25rpx;">
                    <view style="display: flex; justify-content:center; padding:30rpx;border-bottom:1rpx solid #efefef;">
                        服务
                    </view>
                    <view style="padding: 30rpx;">
                        <view class="serve-list">
                            <view class="list">
                                <view class="title">
                                    <text>7天内可申请退货</text>
                                </view>
                                <view class="content">
                                    <text>在购买商品7天内,对商品不满意,未拆封时,则可申请退货，</text>
                                </view>
                            </view>
                            <view class="list">
                                <view class="title">
                                    <text>24小时极速退款</text>
                                </view>
                                <view class="content">
                                    <text>在购买商品7天内,对商品不满意,未拆封时,则可申请退货</text>
                                </view>
                            </view>
                            <view class="list">
                                <view class="title">
                                    <text>商城专属服务</text>
                                </view>
                                <view class="content">
                                    <text>购买商品7天内,对商品不满意,未拆封时,则可申请退货</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view style="display: flex; justify-content:center; align-items:center;padding: 60rpx;">
                        <view style="background:#2e996d; color: #FFFFFF; text-align: center; padding: 15rpx 80rpx; border-radius: 60rpx;width: 580rpx;"
                            @tap='close1'>
                            我知道了
                        </view>
                    </view>
                </view>
            </uni-popup>
            <!-- 联系客服kefu @click="ToChat"-->
            <view class="float"  @tap='toChatPage()'>
                <button class="float-button" hover-class="hover-btn-bg">
                    <uni-icons type="chat" size="30px" color="#fff" style="margin-top: -20rpx;" />
                    <!-- <image class='iconfont' :src="$imgUrl+'image/onLine.png'"></image> -->
                    <text class="float-text">客服</text>
                </button>
                
            </view>
            
            <!-- 商品sku -->
            <vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :modeNum="modeNum" :localdata="goodsInfo" :amount-type="0"
                :mode="skuMode" @open="onOpenSkuPopup" @close="SkuPopup" @add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>
            <!-- theme="green" -->
            <!-- 分享弹窗 -->
            <!-- <share-column @share="share" :provider_list="provider_list" :is_show_share_box="is_show_share_box" @hideColumn="is_show_share_box = !is_show_share_box" /> -->
            <u-back-top :scroll-top="PageScrollTop" top="600"></u-back-top>
            <!-- <quick-message ref="message"></quick-message> -->
        </view>
    </view>
</template>

<script>
import {
    getGoodsInfo,
    addCart,
    buyNow,
    shareGoods,
    getGoodsListsToFollow,
    getGoodsListsToLike
} from '@/api/mall.js'
import {
    setCollect,
} from "@/api/my/favorite"
import CommodityList from '@/components/common/CommodityList.vue'
import mphtml from '@/pagesA/components/mp-html/mp-html.vue'
export default {
    // "usingComponents": {
    //     "mp-html": "/components/mp-html/index"
    //   },
    components: {
        CommodityList,
        mphtml,
        // recommend
    },
    data() {
        return {
            code: '',
            isShow: false,
            isShow0: false,
            // isShow1: false,
            // goodsContent: {},
            // animationData: {},
            num: 1,
            maodianxs: false,
            miaodxb: '',
            maodian: ["商品", "评价", "详情", "推荐"],
            product: {
                evaluNumber: 1000,
                evaluRate: 96,
            },
            evaluate: {},

            $imgUrl: this.$imgUrl,
            selectData: {},
            AttriValue: 0,
            AttriList: [],
            rangeList: [],
            selectModelArry: [],
            selectModel: "",
            data: {},
            badge: 0,
            queryParams: {
                page: 1,
                limit: 20,
            },
            // page: '', //页码
            pageCount: '', //总页数
            range: [],
            // addressValue: '',
            dataList: [],
            list: [],
            dataList0: [],
            dataList1: [],
            dataList2: [],
            dataList3: [],

            // 是否打开SKU弹窗
            skuKey: false,
            // SKU弹窗模式
            skuMode: 1,
            // 后端返回的商品信息
            goodsInfo: {
                spec_list: [],
                sku_list: [],
            },
            modeNum: 1,
            is_show_share_box: null,
            provider_list: [{
                "name": "微信好友",
                "url": "http://yl.weilankangyang.com/static/mini_program/share_icon/weixin.png",
                provider: "weixin",
            },
            {
                "name": "微信朋友圈",
                "url": "http://yl.weilankangyang.com/static/mini_program/share_icon/pengyouquan.png",
                provider: "weixin"
            },
            {
                "name": "QQ",
                "url": "http://yl.weilankangyang.com/static/mini_program/share_icon/QQ.png",
                provider: "qq"
            },
                // {
                //     "name": "微博",
                //     "url": "../../static/share_icon/weibo.png",
                //     provider: "sinaweibo"
                // }
            ],
            bannerList: [],
            huanxin: {},
            PageScrollTop: 0,
            isCircle: false,
            isToken: uni.getStorageSync("token") || ""
        }
    },
    onLoad(params) {
        this.code = decodeURIComponent(params.code);
        this.getGoodsInfo();
        if (params.invite) {
            uni.setStorageSync('goodsCode', params.code)
            uni.setStorageSync('invite', params.invite)
        }
        this.$bus.$on('addAddress', this.addAddress)
    },
    onShow() {
        if (this.isToken) {
            this.getGoodsListsToLike();
            this.getGoodsListsToFollow();
            this.huanxin = uni.getStorageSync("huanxin") ? JSON.parse(uni.getStorageSync("huanxin")) : {}
            if (uni.getStorageSync("addressListLength") == 0) {
                this.clearAddress()
            }
        }
        //获取胶囊的宽高
        // console.log(uni.getMenuButtonBoundingClientRect(), "获取胶囊的宽高")
        // this.jn = uni.getMenuButtonBoundingClientRect()
    },
    //关闭监听
    onUnload() {
        // uni.$off('add');
        uni.$off('addAddress')
    },
    //页面加载的时候
    // onLoad: function(options) {

    // },
    onPageScroll(e) {
        this.PageScrollTop = e.scrollTop;
        if (this.PageScrollTop > 100) {
            this.maodianxs = true
        } else {
            this.maodianxs = false
        }
    },
    //触底加载
    onReachBottom() {
        console.log(12333);
        let that = this
        that.queryParams.page = that.queryParams.page + 1
        if (that.queryParams.page > that.pageCount) return;
        let params = {
            page: that.queryParams.page,
            limit: that.queryParams.limit,
        }
        getGoodsListsToFollow(params).then((res) => {
            console.log(res, "ressss")
            for (let i = 0; i < res.data.lists.length; i++) {
                that.dataList.push(res.data.lists[i])
            }
            // that.queryParams.page = res.page
            // that.queryParams.pageCount = res.pageCount
            console.log(that.dataList, '9999')
        })
    },
    // #ifdef MP-WEIXIN
    onShareAppMessage() {
        shareGoods({
            code: this.code
        }).then(res => {
            console.log(res, "resss")
            if (res.code == 1) {
                return {
                    title: res.data.title,
                    // imageUrl: "https://yl.weilankangyang.com/static/mini_program/logo.jpg",
                    imageUrl: res.data.img_url,
                    path: '/pagesA/mall/goodsDetails?code=' + this.code + "&invite=" + uni.getStorageSync(
                        "invite_code") ? uni.getStorageSync("invite_code") : ''
                }
            }

        })
    },
    // #endif
    methods: {
        getGoodsInfo() {
            this.$loading()
            getGoodsInfo({
                code: this.code
            }).then(res => {
                console.log(res, "resss")
                this.bannerList = []
                this.data = res.data
                this.badge = this.data.cart_number
                this.list = res.data.slider;
                this.list.forEach(e => {
                    this.bannerList.push({
                        image: e
                    })
                });
                this.product.price_selling = res.data.price_selling;
                this.product.price_market = res.data.price_market;
                this.product.name = res.data.name;
                this.product.content = this.formatRichText(res.data.content)
                this.product.stock_virtual = res.data.stock_virtual;
                this.product.is_collect = res.data.is_collect;
                this.product.remark = res.data.remark;
                this.product.cover = res.data.cover;

                if (res.data.address.length > 0 || res.data.address) {
                    uni.setStorageSync('addressListLength', 1)
                    this.product.address = res.data.address.province + res.data.address.city + res.data
                        .address
                        .area + res.data.address.detailed
                    this.product.address_id = res.data.address.id;
                    this.product.address_name = res.data.address.name;
                    this.product.address_mobile = res.data.address.mobile
                }
                const specString1 = res.data.items[0].goods_spec
                const specArray1 = specString1.split(";;").map(spec => {
                    const [key, value] = spec.split("::");
                    return {
                        key
                    };
                });
                let array1 = []
                res.data.items.forEach(e => {
                    array1.push(e.goods_spec)
                });
                const specStrings = array1
                const specObjects = specArray1
                const specGroups = {};
                // 拆分规格对象数组为规格分组对象
                specObjects.forEach(specObject => {
                    const {
                        key
                    } = specObject;
                    specGroups[key] = [];
                });
                console.log(specGroups,'specObjects')
                // 定义规格分组
                // 拆分规格字符串数组为规格数组
                specStrings.forEach(specString => {
                    const specs = specString.split(";;").map(spec => {
                        const [group, name] = spec.split("::");
                        return {
                            group,
                            name
                        };
                    });
                    // console.log(specs,'specs')
                    specs.forEach(spec => {
                        if (specGroups[spec.group]) {
                            if (!specGroups[spec.group].some(item => item.name === spec
                                .name)) {
                                specGroups[spec.group].push({
                                    group: spec.group,
                                    name: spec.name
                                });
                            }
                        }
                    });
                });
                // 构建规格数组
                const specArray = Object.entries(specGroups).map(([name, list]) => ({
                    name,
                    list,
                }));
                // this.rangeList = JSON.parse(res.data.data_specs)
                this.rangeList = specArray
                console.log(res.data, "res.data456")
                console.log(this.rangeList, "this.rangeList")
                this.goodsInfo._id = this.data.busin_id
                this.goodsInfo.name = this.data.name
                this.goodsInfo.goods_thumb = this.data.cover
                this.selectModelArry = []
                this.goodsInfo.spec_list = []
                console.log(this.rangeList, "this.rangeList")
                this.rangeList.forEach((e, i) => {
                    this.selectModelArry.push(e.list[0].name)
                    this.goodsInfo.spec_list.push({
                        name: e.name,
                        list: e.list
                    })
                })
                this.selectModel = this.selectModelArry.length > 0 ? this.selectModelArry.join("") : ""
                console.log(this.selectModel, "this.selectModel")
                this.data.items.forEach((element, index) => {
                    let arry = element.goods_spec.split(";;")
                    let sku_name_arr = []
                    arry.forEach(e => {
                        sku_name_arr.push(e.split("::")[1])
                    });
                    this.goodsInfo.sku_list.push({
                        _id: index + 1,
                        sku_name_arr: sku_name_arr,
                        stock: element.stock_total,
                        price: element.price_selling,
                        goods_sku: element.goods_sku,
                        goods_name: this.data.name,
                    })
                });
                console.log(this.goodsInfo.sku_list, "this.data.items678")
                console.log(this.goodsInfo, "this.data.items888")
                if (res.data.evaluate.length == 0) {
                    this.isShow0 = true
                } else {
                    this.isShow0 = false
                    this.evaluate.data = res.data.evaluate;
                    this.evaluate.avatar = res.data.evaluate.user.avatar;
                    this.evaluate.nicename = res.data.evaluate.user.nicename;
                    this.evaluate.time = res.data.evaluate.evaluate_time;
                    this.evaluate.content = res.data.evaluate.evaluate_content;
                    this.evaluate.specs = res.data.evaluate.goods_spec.replace(/;;/g, ",  ");
                    this.evaluate.specs = this.evaluate.specs.replace(/::/g, ":")
                }
                this.$hideLoading()
            })
        },
        formatRichText(html) {
            let newContent = html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"').replace(/<iframe/gi, '<video style="width:100%"').replace(/\/iframe>/g, '/video>').replace(/<section/g, '<div').replace(/\/section>/g, '\div>');
            console.log(newContent, "newContentnewContentnewContentnewContent")
            return newContent;
        },
        addAddress(val) {
            // this.getGoodsInfo()
            this.selectData = val
            console.log(this.selectData, "this.selectData")
            if (this.selectData.province) {
                this.product.address = this.selectData.province + this.selectData.city + this.selectData.area +
                    this.selectData.detailed
            }
            this.product.address_id = this.selectData.id
        },
        clearAddress() {
            this.product.address = ''
            this.product.address_id = ''
        },
        getGoodsListsToFollow() {
            getGoodsListsToFollow(this.queryParams).then(res => {
                console.log(res, '大家都在看')
                this.dataList = res.data.lists
                // this.page = res.data.page
                this.pageCount = res.data.pageCount
                console.log(this.dataList.length, '9999')
            }).catch(() => { })
        },

        getGoodsListsToLike() {
            getGoodsListsToLike({
                count: 9
            }).then(res => {
                this.dataList1 = res.data
                // for (let i = 0; i < this.dataList0.length; i++) {
                //     this.dataList1 = this.dataList0.slice(0, 9)
                //     this.dataList2 = this.dataList0.slice(9, 18)
                //     this.dataList3 = this.dataList0.slice(18, 27)
                // }
                console.log(this.dataList1, '猜你喜欢')
                // for(var i=0; i < this.dataList0.length; i+=9){
                //     this.dataList1.push(this.dataList0.slice(i.i+9))
                // }
            })
        },
        //锚点点击事件
        miaod(e) {
            this.miaodxb = e
            console.log(this.miaodxb, "+++++++++")
            if (e == 0) {
                uni.pageScrollTo({
                    duration: 100, //过渡时间
                    scrollTop: 0, //到达距离顶部的top值
                })
            } else if (e == 1) {
                uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
                    uni.pageScrollTo({
                        scrollTop: this.PageScrollTop + data.top - 70,
                        duration: 100
                    });
                }).exec()
                // uni.pageScrollTo({
                //     duration: 100, //过渡时间
                //     scrollTop: 612, //到达距离顶部的top值
                // })
            } else if (e == 2) {
                uni.createSelectorQuery().select(".productDetail").boundingClientRect((data) => { //data - 各种参数
                    uni.pageScrollTo({
                        scrollTop: this.PageScrollTop + data.top - 70,
                        duration: 100
                    });
                }).exec()
            } else {
                uni.createSelectorQuery().select(".DouZaiKan").boundingClientRect((data) => { //data - 各种参数
                    uni.pageScrollTo({
                        scrollTop: this.PageScrollTop + data.top - 70,
                        duration: 100
                    });
                }).exec()
            }
        },
        //选择地址
        selectAddress() {
            uni.navigateTo({
                url: "/pagesA/my/addressList?type=selectedPath"
            })
        },

        //跳转详情页
        detailClick(item) {
            uni.navigateTo({
                url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.code) + "&invite=" + (uni.getStorageSync(
                    "invite_code") || '')
            })
        },

        //跳转商品评价
        goReviews(item) {
            uni.navigateTo({
                url: '/pagesA/mall/goodsEvaluateList?code=' + encodeURIComponent(this.code)
            })
        },
        //改变商品数量
        changeNumber(value) {
            this.num = value;
        },
        toChatPage() {
            console.log(">>>>>>>>>执行进入chat页面")
            // 写死nameList
            // var nameList = {
            //     myName: "test1",
            //     your: "busin_1_staff_7"
            // }
            // this.huanxin = JSON.parse(uni.getStorageSync("huanxin"))
            // myName:this.huanxin.username,
            //动态nameList
            // var nameList = {
            //     myName: uni.getStorageSync("myUsername"),
            //     your: this.data.resp_staff_huanxin_username,
            //     type: 0,
            //     match_id: this.code
            // }
            // uni.navigateTo({
            //     url: "/pagesA/chatroom/chatroom?username=" + JSON.stringify(nameList),
            // });

            // 企业微信
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: "/pages/login/index"
                })
            } else {
                wx.openCustomerServiceChat({
                    extInfo: {
                        url: 'https://work.weixin.qq.com/kfid/kfc957bfe40bb17d6b8' //客服ID
                    },
                    corpId: "ww4d9a453b47317369", //企业微信ID
                    success(res) {
                        console.log(res, 789)
                    }
                })
            }
        },

        //跳转到购物车页面
        goShopCart() {
            uni.switchTab({
                url: "/pages/mall/car",
            });
        },
        
        //跳转到shouye1
        goHome() {
            uni.switchTab({
                url: "/pages/index/index",
            });
        },

        // select(e) {
        //     uni.showToast({
        //         title: `您选择了第${e.index + 1}项：${e.item.text}`,
        //         icon: 'none'
        //     })
        // },

        // share(type, provider) {
        //     let scene = provider == "weixin" ? (type == '微信好友' ? 'WXSceneSession' : 'WXSenceTimeline') : ''
        //     //执行分享的逻辑
        //     let that = this
        //     let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
        //     let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
        //     shareGoods({
        //         code: this.code
        //     }).then(res1 => {
        //         console.log(res1, "res1111")
        //         uni.share({
        //             provider: provider, //分享服务提供商（即weixin|qq|sinaweibo）
        //             scene: scene, //场景，可取值参考下面说明。
        //             type: 0, //分享形式
        //             href: 'http://h5.weilankangyang.com/#/pagesA/mall/goodsDetails?code=' + this
        //                 .code, //跳转链接
        //             title: res1.data.title, //分享内容的标题
        //             summary: res1.data.desc, //分享内容的摘要
        //             imageUrl: res1.data.img_url, //图片地址
        //             success: function (res) {
        //                 that.posters = false; //成功后关闭底部弹框
        //             },
        //             fail: function (err) {
        //                 uni.showToast({
        //                     title: '分享失败',
        //                     icon: 'none',
        //                     duration: 2000
        //                 })
        //                 that.posters = false;
        //             }
        //         })
        //     })
        // },

        deFollow(product) {
            let params = {
                match_code: this.code,
                type: 1
            }
            setCollect(params).then((res) => {
                if (res.code == 1) {
                    this.product.is_collect = res.data.status
                    this.$message(res.info)
                    this.getGoodsInfo()
                } else {
                    this.$message(res.info)
                }

            })
            // if (this.product.is_collect == 0) {
            //     uni.showToast({
            //         title: "点赞成功",
            //         duration: 2000,
            //         icon: "none"
            //     })
            // } else {
            //     if (this.product.is_collect == 1)
            //         this.product.is_collect = 0,
            //         uni.showToast({
            //             title: "取消点赞",
            //             duration: 2000,
            //             icon: "none"
            //         })
            // }
        },
        changeTag(e, index) {
            this.selectModelArry[index] = e.detail.data.text
            this.selectModel = this.selectModelArry.join("")
        },


        // 获取商品信息，并打开sku弹出
        openSkuPopup(val) {
            this.modeNum = val
            this.skuKey = true;
        },
        // sku组件 开始-----------------------------------------------------------
        onOpenSkuPopup() {
            console.log("监听 - 打开sku组件");
        },
        SkuPopup(val) {
            console.log(val, 666)
            console.log("监听 - 关闭sku组件");
        },
        // 加入购物车前的判断
        addCartFn(obj) {
            let {
                selectShop
            } = obj;
            // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
            let res = {};
            let name = selectShop.goods_name;
            if (selectShop.sku_name != "默认") {
                name += "-" + selectShop.sku_name_arr;
            }
            // res.msg = `${name} 已添加到购物车`;
            // res.msg = `操作成功11!`;
            if (typeof obj.success == "function") obj.success(res);
        },
        // 加入购物车按钮
        addCart(selectShop) {
            console.log("监听 - 加入购物车");
            this.judgeLogin(() => {
                this.addCartFn({
                    selectShop: selectShop,
                    success: (ress) => {
                        let invite_code = ((uni.getStorageSync('goodsCode') == this.data.code) && uni
                            .getStorageSync("invite")) ? uni.getStorageSync("invite") : ''
                        let json = {
                            sku: selectShop.goods_sku,
                            code: this.data.code,
                            number: selectShop.buy_num,
                            invite_code: invite_code == uni.getStorageSync("invite_code") ? '' : invite_code
                        }
                        console.log(json, "加入购物车数据")
                        addCart(json).then(res => {
                            if (res.code == 1) {
                                this.badge = res.data.cart_number
                                uni.removeStorageSync('goodsCode');
                                // 实际业务时,请替换自己的加入购物车逻辑
                                this.toast(res.info);
                                setTimeout(() => {
                                    this.skuKey = false;
                                }, 300);
                            }
                        })
                    }
                });
            })
        },
        getSelectArray(val) {
            this.selectModelArry = val
            this.selectModel = this.selectModelArry.length > 0 ? this.selectModelArry.join("") : ""
        },
        // 立即购买
        buyNow(selectShop) {
            this.judgeLogin(() => {
                console.log(this.selectModelArry, "this.selectModelArry")
                let invite_code = ((uni.getStorageSync('goodsCode') == this.data.code) && uni.getStorageSync(
                    "invite")) ? uni.getStorageSync("invite") : ''
                let json = {
                    sku: selectShop.goods_sku,
                    code: this.code,
                    number: selectShop.buy_num,
                    invite_code: invite_code == uni.getStorageSync("invite_code") ? '' : invite_code
                }
                console.log(json, "立即购买数据")
                buyNow(json).then((res) => {
                    console.log(res, "立即购买")
                    if (res.code == 1) {
                        let data = {
                            ...res.data,
                            ...{
                                selectModelArry: this.selectModelArry,
                                type: 2
                            }
                        }
                        uni.removeStorageSync('goodsCode');
                        uni.navigateTo({
                            url: '/pagesA/mall/orderconfirm?dataList=' + encodeURIComponent(JSON
                                .stringify(data))
                        })
                    } else {
                        this.$message(res.info)
                    }
                })
            })
        },
        toast(msg) {
            uni.showToast({
                title: msg,
                icon: "none"
            });
        },
        open() {
            this.$refs.popup.open()
        },
        close() {
            this.$refs.popup.close()
        },
        close0() {
            this.$refs.popup.close()
        },
        share0() {
            this.$refs.popup0.open('bottom')
        },
        share1() {
            this.$refs.popup1.open('bottom')
        },
        close1() {
            this.$refs.popup1.close()
        },
    },
}
</script>

<style lang="scss" scoped>
.page {
  position: absolute;
  width: 100%;
  height: 100hv;
  background: #f6f6f6;
  overflow-x: hidden;
  /* overflow-y: auto; */
}

.goods {
  .box1 {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30rpx;
    z-index: 9;

    .yangs {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .yangs-n {
      width: 30rpx;
      height: 5rpx;
      margin-top: 15rpx;
    }
  }

  .banner {
    width: 100%;
    height: 422rpx;
  }

  .box2 {
    padding: 30rpx;
    background: #ffffff;

    .boxli {
      display: flex;
      justify-content: space-between;
      align-items: center;
        .ret-yuans {
          color: #a6a8ae;
          font-size: 30rpx;
          margin-left: 6rpx;
          text-decoration: line-through;
        }
      .boxl {
        color: #ff0000;
        font-size: 48rpx;
        font-weight: bold;
      }

      .boxr {
        display: flex;

        .share {
          //   margin-right: 38rpx;
          padding: 20rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .share-button {
          display: block;
          //   width: 32rpx;
          //   height: 32rpx;
          border: none;
          background-color: transparent;

          &::after {
            border: none;
          }

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .collect {
          padding: 20rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-top: 6rpx;
          }
        }
      }
    }

    .name {
      font-size: 36rpx;
      margin-top: 20rpx;
    }
  }

  .height30 {
    height: 30rpx;
    background: #f7f7f7;
  }

  .goodsInfo {
    padding: 30rpx;
    font-size: 30rpx;
    background: #ffffff;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      justify-content: space-between;
    }

    .iteml {
      display: flex;
      align-items: center;
      width: 640rpx;

      .p1 {
        font-size: 28rpx;
        color: #999999;
        margin-right: 30rpx;
        width: 70rpx;
      }
    }

    .more-content {
      display: flex;
      align-items: center;

      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 20rpx;
      }
    }
  }

  .serve {
    display: flex;
    align-items: center;
    padding: 30rpx;
    justify-content: space-between;
    background: #ffffff;

    .boxl {
      display: flex;
      align-items: center;
      width: 640rpx;

      .p1 {
        font-size: 26rpx;
        color: #f93a32;
        margin-right: 20rpx;
      }

      .p2 {
        font-size: 24rpx;
        color: #999;
      }
    }

    .more-content {
      display: flex;
      align-items: center;

      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 20rpx;
      }
    }
  }

  .evaluate-data {
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 30rpx;
    justify-content: space-between;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f2f2f2;

    .boxl {
      display: flex;
      align-items: center;

      .p1 {
        margin-right: 20rpx;
      }
    }

    .boxr {
      display: flex;
      align-items: center;

      .p1 {
        margin-right: 20rpx;
        color: #ff0000;
      }

      .more-content {
        display: flex;
        align-items: center;

        .more {
          font-size: 24rpx;
          color: #959595;
          margin-left: 20rpx;
        }
      }
    }
  }

  .evaluateB {
    padding: 30rpx;
    font-size: 28rpx;
    background: #ffffff;

    .boxt {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      justify-content: space-between;

      .boxl {
        display: flex;
        align-items: center;

        image {
          width: 70rpx;
          height: 70rpx;
          border-radius: 100rpx;
          margin-right: 20rpx;
        }
      }
    }

    .gg {
      color: #999;
      padding-top: 30rpx;
    }
  }
  
  .u-load-more-wrap {
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}
   
   .u-load-more-inner {
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	padding: 0 12rpx;
   }
   
  /* @import "../../libs/css/style.components.scss"; */
   
   /* #ifdef MP */
   // 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
   // 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
   u-line {
   	flex: none;
   }
   /* #endif */
}

.float {
  position: fixed;
  right: 20px;
  bottom: 150px;
  z-index: 999;

  .float-button {
    width:60px;
    height: 60px;
    border-radius: 50%;
    background: #2e996e;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .float-text {
    // padding: 12rpx 30rpx;
    // background-color: #2e996e;
    color: #fff;
    font-size: 26rpx;
    margin-top: -70rpx;
    // border-radius: 25rpx;
    // margin-left:15rpx;
    z-index: 1000;
  }

  .hover-btn-bg {
    background-color: #3f99ab;
    color: #fff;
  }
}

.title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
}

.title text {
  font-size: 26rpx;
  color: #212121;
  font-weight: bold;
}

/* .title:before{
    	display: inline-block;
    	content: "";
    	width: 14rpx;
    	height: 14rpx;
    	background-color: #212121;
    	border-radius: 100%;
    	margin-right: 20rpx;
    } */

.content {
  font-size: 28rpx;
  color: #959595;
}

swiper {
  overflow: hidden;
  width: 100%;
  height: 536rpx;
}

.swiper0 {
  overflow: hidden;
  width: 100%;
  height: 1080rpx;
}

.swiper-img {
  overflow: hidden;
  width: 100%;
  height: 536rpx;
}

.comment {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.commodity-content {
  // display: flex;
  // flex-direction: column;
  padding-bottom: 10rpx;
  border: 1rpx solid #f2f2f2;
  width: 250rpx;
  margin: 0 10rpx 30rpx 10rpx;
}

.commodity-img {
  width: 100%;
  //   height: 60%;
  height: 250rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.commodity-img image {
  // width: 180rpx;
  height: 250rpx;
}

.commodity-name {
  padding: 10rpx;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-height: 46rpx;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.ret-yuans {
  color: #a6a8ae;
  font-size: 28rpx;
  margin-left: 18rpx;
  text-decoration: line-through;
}

.commodity-price {
  color: #ff0000;
  margin-left: 10rpx;
  // margin:18rpx 0 18rpx 10rpx;
}

.details-foot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  display: flex;
  /* justify-content: space-between; */
  background-color: #ffffff;
  align-items: center;
  border-top: 1rpx solid #efefef;
  /* padding-bottom: 40rpx; */
}

.foot-item {
  display: flex;
  text-align: center;
  width: 40%;
  /* margin-left: 50rpx; */
}

.foot-item1 {
  display: flex;
  width: 60%;
  text-align: center;
  /*  margin-right: 50rpx; */
}

.foot-item0 {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 50%;
  /* margin: 0 20rpx; */
  font-size: 24rpx;
  color: #7f8699;
}

.details-foot .iconfont {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  color: black;
  margin-bottom: 5rpx;
}

.details-foot .iconfont0 {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  color: black;
}

.add-shopcart {
  width: 50%;
  padding: 40rpx 30rpx;
  background-image: linear-gradient(to bottom right, #feb802, #fe7714);
  color: #ffffff;
  height: 120rpx;
}

.purchase {
  width: 50%;
  padding: 40rpx 30rpx;
  background-color: #ff3225;
  color: #ffffff;
  height: 120rpx;
}

.pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.pop-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.pop-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
}

.pop-img {
  width: 260rpx;
  height: 260rpx;
}

.pop-num {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.pop-sub {
  color: #ffffff;
  text-align: center;
  padding: 18rpx 40rpx;
  border-radius: 60rpx;
  width: 330rpx;
}

/* .pop-sub0 {
        background-color: #FF6901;
        color: #FFFFFF;
        text-align: center;
        padding: 15rpx 50rpx;
        border-radius: 60rpx;
        width: 180rpx;
    } */

.poster {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  image {
    width: 100%;
  }
}
</style>